<template>
  <xdh-echarts :options='options' width='100%' height='88%'></xdh-echarts>
</template>

<script>
  import XdhEcharts from '../widgets/xdh-echarts'

  // const myColor = ['#0a49b0', '#19aff4', '#ea4434', '#fbd135', '#66c860']

  export default {
    name: 'bar-one',
    components: {
      XdhEcharts
    },
    props: {
      // 柱状图数据
      billData: {
        type: Array,
        default() {
          return []
        }
      },
      phoneData: {
        type: Array,
        default() {
          return []
        }
      },
      xAxisData: {
        type: Array,
        default() {
          return []
        }
      }
    },
    directives: {},
    mixins: [],
    data() {
      let _bgSum = (val) => {
        let _max = Math.max.apply(null, val) * 1.1
        return val.map(r => {
          return _max - r
        })
      };
      const _plus = (a, b) => {
        if (b.length > a.length) {
          let t = a
          a = b
          b = t
        }

        return a.map(function (v, i) {
          return v + (b[i] || 0)
        })
      }
      return {
        options: {
          grid: {
            top: 20,
            left: '15%',
            bottom: 20,
            right: '20%'
          },
          legend: {
            data: ['话单', '账单'],
            top: 20,
            right: 0,
            orient: 'vertical',
            textStyle: {
              color: '#fff'
            }
          },
          xAxis: {
            type: 'value',
            splitNumber: 9,
            axisLine: {
              show: false
            },
            splitLine: {
              lineStyle: {
                color: '#0F3D72',
                opacity: 0.7
              }
            },
            axisTick: {
              show: false
            },
            axisLabel: {
              show: false
            }
          },
          yAxis: {
            type: 'category',
            nameLocation: 'start',
            nameTextStyle: {
              color: '#fff'
            },
            nameGap: 9,
            shadowOffsetX: '-20px',
            axisLine: {
              show: false
            },
            splitLine: {
              lineStyle: {
                color: '#0F3D72'
              }
            },
            axisTick: {
              show: false
            },
            axisLabel: {
              color: '#fff'
            },
            data: this.xAxisData.reverse()
          },
          series: [{
            name: '话单',
            type: 'bar',
            stack: 'chart',
            z: 3,
            itemStyle: {
              normal: {
                label: {
                  show: true,
                  position: 'inside'
                },
                color: '#19AFF4'
              }
            },
            data: this.phoneData
          }, {
            name: '账单',
            type: 'bar',
            stack: 'chart',
            z: 3,
            itemStyle: {
              normal: {
                label: {
                  show: true,
                  position: 'right'
                },
                color: '#FBD135'
              }
            },
            data: this.billData
          }, {
            type: 'bar',
            stack: 'chart',
            silent: true,
            itemStyle: {
              normal: {
                color: '#0d2653'
              }
            },
            data: _bgSum(_plus(this.phoneData, this.billData))
          }]
        }
      }
    },
    computed: {},
    watch: {},
    methods: {},
    created() {
    }
  }
</script>

<style scoped>

</style>
